<template>
  <div class="sc-design">
    <q-resize-observer :debounce="300" @resize="resize" />
    <div class="row q-px-sm">
      <div class="col-md-3 col-sm-6 col-xs-12 q-px-sm q-mb-md">
        <sc-shadow>
          <q-card flat class="no-border-radius text-grey-9">
            <q-card-section class="bg-white">
              <q-avatar
                color="green-1"
                size="sm"
                text-color="green"
                class="q-mr-sm"
                icon="visibility"
              ></q-avatar>
              <span class="val">
                {{ userInfo.isadmin == 0 ? '主页访问量' : '小程序访问量' }}
              </span>
              <span>
                <q-chip
                  size="sm"
                  square
                  outline
                  color="green"
                  class="bg-green-1 float-right"
                  label="日"
                ></q-chip>
              </span>
            </q-card-section>
            <q-separator />
            <q-card flat square class="q-pa-md">
              <div style="height: 70px">
                <q-item-label
                  class="text-grey-9 q-mb-md val"
                  style="font-size: xx-large"
                >
                  {{ view }}
                </q-item-label>
                <q-item-label class="q-mb-md">
                  <span class="q-mr-md" v-if="userInfo.isadmin == 1">
                    新用户数 {{ percentage }}
                  </span>
                  <span class="q-mr-md" v-else>
                    日同比 {{ percentage }}%
                    <q-icon
                      size="xs"
                      :name="
                        percentage < 0 ? 'arrow_drop_down' : 'arrow_drop_up'
                      "
                      :color="percentage < 0 ? 'info' : 'red'"
                    />
                  </span>
                </q-item-label>
              </div>
              <q-separator spaced="15px" />
              <q-item-label>
                <span>{{
                  userInfo.isadmin == 0 ? '总访问量' : '总访问次数'
                }}</span>
                <span class="float-right">{{ zview | numeral('0,0') }}次</span>
              </q-item-label>
            </q-card>
          </q-card>
        </sc-shadow>
      </div>
      <div class="col-md-3 col-sm-6 col-xs-12 q-px-sm q-mb-md">
        <sc-shadow>
          <q-card flat class="no-border-radius text-grey-9">
            <q-card-section class="bg-white">
              <q-avatar
                color="red-1"
                size="sm"
                text-color="red"
                class="q-mr-sm"
                icon="cloud_upload"
              ></q-avatar>
              <span class="val"> 发布数 </span>
              <span>
                <q-chip
                  size="sm"
                  square
                  outline
                  color="blue"
                  class="bg-blue-1 float-right"
                  label="月"
                ></q-chip>
              </span>
            </q-card-section>
            <q-separator />
            <q-card flat square class="q-pa-md">
              <div style="height: 70px">
                <q-item-label
                  class="text-grey-9 q-mb-md val"
                  style="font-size: xx-large"
                >
                  {{ release }}
                </q-item-label>
                <q-item-label class="q-pb-sm">
                  <q-linear-progress
                    :value="re_percentage"
                    rounded
                    stripe
                    size="8px"
                  />
                  <q-tooltip
                    >本月发布数占比{{ re_percentage * 100 }}%</q-tooltip
                  >
                </q-item-label>
              </div>
              <q-separator spaced="15px" />
              <q-item-label>
                <span>总发布数</span>
                <span class="float-right"
                  >{{ zrelease | numeral('0,0') }}篇</span
                >
              </q-item-label>
            </q-card>
          </q-card>
        </sc-shadow>
      </div>
      <div class="col-md-3 col-sm-6 col-xs-12 q-px-sm q-mb-md">
        <sc-shadow>
          <q-card flat class="no-border-radius text-grey-9">
            <q-card-section class="bg-white">
              <q-avatar
                color="orange-1"
                size="sm"
                text-color="orange"
                class="q-mr-sm"
                icon="sticky_note_2"
              ></q-avatar>
              <span class="val"> 阅读量 </span>
              <span>
                <q-chip
                  size="sm"
                  square
                  outline
                  color="red"
                  class="bg-red-1 float-right"
                  label="周"
                ></q-chip>
              </span>
            </q-card-section>
            <q-separator />
            <q-card flat square class="q-pa-md">
              <div style="height: 70px">
                <q-item-label
                  class="text-grey-9 q-mb-md val"
                  style="font-size: xx-large"
                >
                  {{ reading }}
                </q-item-label>
                <q-item-label class="q-mb-md">
                  <span class="q-mr-md">
                    周同比 {{ percentage }}%
                    <q-icon
                      size="xs"
                      :name="
                        percentage < 0 ? 'arrow_drop_down' : 'arrow_drop_up'
                      "
                      :color="percentage < 0 ? 'info' : 'red'"
                    />
                  </span>
                </q-item-label>
              </div>
              <q-separator spaced="15px" />
              <q-item-label>
                <span>总阅读量</span>
                <span class="float-right"
                  >{{ zreading | numeral('0,0') }}次</span
                >
              </q-item-label>
            </q-card>
          </q-card>
        </sc-shadow>
      </div>
      <div class="col-md-3 col-sm-6 col-xs-12 q-px-sm q-mb-md">
        <sc-shadow>
          <q-card flat class="no-border-radius text-grey-9">
            <q-card-section class="bg-white">
              <q-avatar
                color="purple-1"
                size="sm"
                text-color="purple"
                class="q-mr-sm"
                icon="people_alt"
              ></q-avatar>
              <span class="val"> 新增{{ person }} </span>
              <span>
                <q-chip
                  size="sm"
                  square
                  outline
                  color="red"
                  class="bg-red-1 float-right"
                  label="月"
                ></q-chip>
              </span>
            </q-card-section>
            <q-separator />
            <q-card flat square class="q-pa-md">
              <div style="height: 70px">
                <q-item-label
                  class="text-grey-9 q-mb-md val"
                  style="font-size: xx-large"
                >
                  {{ fans }} 位
                </q-item-label>
                <q-item-label class="q-mb-md" v-if="fanslist.length > 0">
                  <span v-for="(user, index) in fanslist" :key="index">
                    <q-avatar size="sm" v-if="index === 0">
                      <q-img :src="user.headimg" />
                      <q-tooltip
                        transition-show="flip-right"
                        transition-hide="flip-left"
                        content-class="bg-primary"
                        content-style="font-size: 10px"
                      >
                        {{ user.nickname }}
                      </q-tooltip>
                    </q-avatar>
                    <q-avatar v-else size="sm" style="margin-left: -8px">
                      <q-img :src="user.headimg" />
                      <q-tooltip
                        transition-show="flip-right"
                        transition-hide="flip-left"
                        content-class="bg-primary"
                        content-style="font-size: 10px"
                      >
                        {{ user.nickname }}
                      </q-tooltip>
                    </q-avatar>
                  </span>
                  <q-avatar
                    size="sm"
                    color="orange-2"
                    text-color="deep-orange"
                    style="margin-left: -8px"
                  >
                    +{{ fans }}
                  </q-avatar>
                </q-item-label>
                <q-item-label class="q-mb-md" v-else>
                  <span v-for="(user, index) in fanslist" :key="index">
                    <q-avatar size="sm">
                      <q-img src="http://www.iqp168.com/images/yxLogo.png" />
                      <q-tooltip
                        transition-show="flip-right"
                        transition-hide="flip-left"
                        content-class="bg-primary"
                        content-style="font-size: 10px"
                      >
                        暂无关注
                      </q-tooltip>
                    </q-avatar>
                  </span>
                </q-item-label>
              </div>
              <q-separator spaced="15px" />
              <q-item-label>
                <span>总{{ person }}</span>
                <span class="float-right">{{ zfans | numeral('0,0') }} 人</span>
              </q-item-label>
            </q-card>
          </q-card>
        </sc-shadow>
      </div>
      <!-- <div class="col-12 q-mb-md">
        <div class="no-border-radius row q-gutter-y-md">
          <div
            class="col-lg col-md-2 col-xs-4 text-center q-px-sm"
            v-for="(data, index) in analysisData.linkData"
            :key="index"
          >
            <sc-shadow>
              <q-card-section class="bg-white" @click="toPage(data.page)">
                <q-avatar
                  :icon="data.icon"
                  :text-color="data.textColor"
                ></q-avatar>
                <q-item-label>{{ data.desc }}</q-item-label>
              </q-card-section>
            </sc-shadow>
          </div>
        </div>
      </div> -->
      <div class="container">
        <div class="content">
          <div class="q-px-sm q-mb-md pd">
            <q-card flat class="no-border-radius text-grey-9">
              <q-item-label class="col-auto" style="padding: 26px 0">
                <q-avatar
                  color="green-1"
                  size="sm"
                  text-color="green"
                  class="q-mr-sm"
                  icon="leaderboard"
                ></q-avatar>
                <span class="val"> 商家主页访问量 </span>
              </q-item-label>
              <q-card-section class="bg-white row items-center">
                <q-item-label class="col q-gutter-sm text-right">
                  <q-btn-toggle
                    @input="changeQueryDate(visitQuery)"
                    style="height: 36px"
                    v-model="visitQuery"
                    unelevated
                    toggle-color="primary"
                    :options="[
                      { label: '最近7天', value: 7 },
                      { label: '近一个月', value: 30 },
                      { label: '本年', value: 365 }
                    ]"
                  />
                  <sc-date-range
                    class="float-right"
                    ref="startEndDate"
                    :field-style="{ 'min-width': '253px' }"
                  />
                </q-item-label>
              </q-card-section>
              <q-separator />
              <div class="row q-pa-md">
                <q-item-label
                  class="col-md-8 col-xs-12 q-mb-sm"
                  :class="{ 'q-pr-md': $q.screen.gt.sm }"
                >
                  <!-- <q-item-label class="text-weight-bold">访问量趋势</q-item-label> -->
                  <div class="q-mt-sm" style="padding-top: 78px">
                    <ebar
                      :height="viewData.height"
                      :option="viewData.option"
                      ref="visitBar"
                    />
                  </div>
                </q-item-label>
                <div class="cc">
                  <q-item-label
                    class="col-md-4 col-xs-12"
                    style="padding: 20px; height: 546px; width: 446px"
                  >
                    <q-item-label class="text-weight-bold q-mb-sm"
                      >访问量排行
                    </q-item-label>
                    <q-item-label
                      class="text-center"
                      v-if="visitRankData.length == 0"
                    >
                      <q-img
                        src="http://wxapp.inheart.cn/img/null.png"
                        style="width: 250px"
                      ></q-img>
                      <q-item-label class="q-mt-md">暂无数据</q-item-label>
                    </q-item-label>
                    <q-list class="rankinglist" v-else>
                      <q-item
                        class="q-pl-none q-py-sm"
                        dense
                        v-for="(item, index) in visitRankData"
                        :key="index"
                      >
                        <q-item-section
                          avatar
                          class="q-pr-none"
                          style="min-width: 32px"
                        >
                          <q-avatar
                            v-if="index < 4"
                            color="blue-1"
                            text-color="blue"
                            size="sm"
                          >
                            {{ index + 1 }}
                          </q-avatar>
                          <q-avatar
                            v-else
                            color="grey-2"
                            text-color="grey-10"
                            size="sm"
                          >
                            {{ index + 1 }}
                          </q-avatar>
                        </q-item-section>
                        <q-item-section
                          avatar
                          class="q-pr-none"
                          style="min-width: 32px"
                        >
                          <q-avatar size="sm">
                            <q-img :src="item.headimg" />
                          </q-avatar>
                        </q-item-section>
                        <q-item-section> {{ item.nickname }}</q-item-section>
                        <q-item-section side
                          >{{ item.total | numeral('0,0') }}
                        </q-item-section>
                      </q-item>
                    </q-list>
                  </q-item-label>
                </div>
              </div>
            </q-card>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import ANALYSIS_DATA from '@/mock/data/dashboard/analysisData'
import * as echarts from 'echarts'
import ScShadow from 'components/shadow/ScShadow'
import ebar from 'components/echarts/Ebar'
import { date } from 'quasar'
import ScDateRange from 'components/common/ScDateRange'
import { getLoginData } from '@/utils/localStorage'
import {
  getrecordAnalysisApi,
  getuserReleaseApi,
  getuserFansApi,
  getviewListApi,
  wx_getVisitTrendApi
} from '@/api/analysisApi'

export default {
  name: 'Analysis',
  components: {
    ScDateRange,
    ScShadow,
    ebar
  },
  data() {
    return {
      windowHeight: 0,
      // analysisData: ANALYSIS_DATA,
      userInfo: {},
      type: '日',
      rtype: '月',
      recordtype: '周',
      zview: 0,
      view: 0,
      percentage: 0,
      zrelease: 0,
      release: 0,
      re_percentage: 0,
      zreading: 0,
      reading: 0,
      person: '关注',
      fanstype: 'user',
      zfans: 0,
      fans: 0,
      fanslist: [],
      viewlisttype: 'user',
      visitQuery: 7,
      viewData: {
        height: 262,
        option: {
          xAxis: {
            data: []
          },

          legend: {
            icon: 'circle',
            bottom: 'bottom',
            tooltip: {
              show: true
            },
            data: []
          },
          grid: {
            top: '5%',
            margin: '2%'
          },
          series: {
            name: '访问量',
            data: [],
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(128, 128, 128, 0)'
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#BC6FE5' },
                { offset: 1, color: '#7157A7' }
              ])
            },
            emphasis: {
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#BC6FE5' },
                  { offset: 1, color: '#7157A7' }
                ])
              }
            }
          }
        }
      },
      visitRankData: [],
      begintime: '',
      endtime: ''
    }
  },
  created() {
    const user = getLoginData()
    let that = this
    if (user == null) {
      that.$router.push('/user/login')
      return
    }
    that.userInfo = user
  },
  methods: {
    resize() {
      this.$refs.visitBar.resize()
    },
    color(item) {
      if (item < 65) {
        return 'blue'
      } else if (item >= 65 && item < 90) {
        return 'purple-4'
      } else {
        return 'grey'
      }
    },
    changeQueryDate(value) {
      if (!value) {
        value = 7
      }
      const currentDate = date.startOfDate(new Date(), 'day')
      let lastDate = new Date()
      let that = this
      if (value === 30) {
        lastDate = date.subtractFromDate(currentDate, { days: 30 })
        that.visitQuery = 30
      } else if (value === 365) {
        lastDate = date.subtractFromDate(currentDate, {
          days: date.getDayOfYear(currentDate)
        })
        that.visitQuery = 365
      } else {
        lastDate = date.subtractFromDate(currentDate, { days: 7 })
        that.visitQuery = 7
      }
      that.$refs.startEndDate.buildStartAndEndDate(lastDate, currentDate)
      that.begintime = this.$refs.startEndDate.startAndEndDate.from
      that.endtime = this.$refs.startEndDate.startAndEndDate.to
      that.getviewList()
      that.getviewRank()
    },
    getviewAnalysis() {
      let that = this
      let guestcode = that.userInfo.reguserno
      if (that.userInfo.isadmin == 1) {
        wx_getVisitTrendApi({
          guestcode: guestcode,
          op_type: 'day'
        }).then((res) => {
          if (res.code == 0) {
            let json = JSON.parse(res.data)
            that.zview = json.list[0].visit_pv
            that.view = json.list[0].visit_uv
            that.percentage = json.list[0].visit_uv_new
          }
        })
      } else {
        getrecordAnalysisApi({
          guestcode: guestcode,
          type: that.type,
          op_type: 'view'
        }).then((res) => {
          if (res.code == 0) {
            that.zview = res.data[0].ztotal
            that.view = res.data[0].sumtotal
            that.percentage = res.percentage
          }
        })
      }
    },
    getuserRelease() {
      let that = this
      let guestcode = that.userInfo.reguserno
      getuserReleaseApi({
        guestcode: guestcode,
        type: that.rtype
      }).then((res) => {
        if (res.code == 0) {
          that.zrelease = res.data[0].ztotal
          that.release = res.data[0].sumtotal
          that.re_percentage = res.percentage
        }
      })
    },
    getrecordAnalysis() {
      let that = this
      let guestcode = that.userInfo.reguserno
      getrecordAnalysisApi({
        guestcode: guestcode,
        type: that.recordtype,
        op_type: 'reading'
      }).then((res) => {
        if (res.code == 0) {
          that.zreading = res.data[0].ztotal
          that.reading = res.data[0].sumtotal
        }
      })
    },
    getfansAnalysis() {
      let that = this
      let guestcode = that.userInfo.reguserno
      getuserFansApi({
        guestcode: guestcode,
        type: that.fanstype
      }).then((res) => {
        if (res.code == 0) {
          that.zfans = res.data[0].ztotal
          that.fans = res.data[0].sumtotal
          that.fanslist = res.data2
        }
      })
    },
    getviewList() {
      let that = this
      let guestcode = that.userInfo.reguserno
      getviewListApi({
        guestcode: guestcode,
        type: that.viewlisttype,
        begintime: that.begintime,
        endtime: that.endtime,
        op_type: 'chart'
      }).then((res) => {
        if (res.code == 0) {
          that.viewData.option.series.data = []
          that.viewData.option.xAxis.data = []
          res.data.forEach((element) => {
            that.viewData.option.series.data.push({
              name: element.date,
              value: element.view
            })
            that.viewData.option.xAxis.data.push(element.date)
          })
        }
      })
    },
    getviewRank() {
      let that = this
      let guestcode = that.userInfo.reguserno
      getviewListApi({
        guestcode: guestcode,
        type: that.viewlisttype,
        begintime: that.begintime,
        endtime: that.endtime,
        op_type: 'ranking'
      }).then((res) => {
        that.visitRankData = []
        if (res.code == 0) {
          that.visitRankData = res.data
        }
      })
    },
    toPage(val) {
      this.$router.push(val)
    },
    getWindowHeight() {
      this.windowHeight = window.innerHeight
    }
  },
  computed: {
    size() {
      if (this.$q.screen.gt.md) {
        return 'sm'
      }
      if (this.$q.screen.gt.xs) {
        return 'xs'
      }
      return '1em'
    }
  },
  mounted() {
    this.changeQueryDate()
    this.getviewAnalysis()
    this.getuserRelease()
    this.getrecordAnalysis()
    this.getfansAnalysis()
    this.getviewList()
    this.getviewRank()
    this.begintime = this.$refs.startEndDate.startAndEndDate.from
    this.endtime = this.$refs.startEndDate.startAndEndDate.t
  },
}
</script>
<style scoped>
.rankinglist {
  max-height: 260px;
  overflow: scroll;
}
.q-item__label {
  padding: 10px;
}
.cc .q-item__label {
  background-color: #f5f9fe;
}
.q-drawer__content {
  background-color: aqua;
}
.q-item__label {
  padding: 0;
}
.val {
  font-weight: bold;
  color: #333 !important;
}
.container {
  height: 743px;
  background-color: rgb(255, 255, 255);
  width: 100%;
  margin: 0px 10px;

}

::-webkit-scrollbar {
  display: none;
}
</style>
